<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table {
	border: 1px solid red;
	width: 70%;
	margin: 0 auto;
	text-align: center;
	/* 将两条线合并成一条线 */
	border-collapse: collapse;
}

td, th {
	border: 1px solid red;
}
</style>
</head>
<body>
  <table>
    <caption>特价商品</caption>
    <tr>
      <th>商品名称</th>
      <th>单价</th>
      <th>库存</th>
      <th>操作</th>
    </tr>
    <tr>
      <td>水杯</td>
      <td>20</td>
      <td>100</td>
      <td><input type="button" value="添加到购物车"></td>
    </tr>
    <tr>
      <td>篮球</td>
      <td>80</td>
      <td>200</td>
      <td><input type="button" value="添加到购物车"></td>
    </tr>
    <tr>
      <td>华为手机</td>
      <td>3000</td>
      <td>50</td>
      <td><input type="button" value="添加到购物车"></td>
    </tr>
  </table>
  <table>
    <caption>购物车</caption>
    <tr>
      <th>商品名称</th>
      <th>单价</th>
      <th>数量</th>
      <th>金额</th>
      <th>操作</th>
    </tr>
    <tr>
      <td>总价:</td>
      <td colspan="4">0元</td>
    </tr>
  </table>
  <script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
  <script type="text/javascript">
			//给按钮添加点击事件
			$("input").click(function() {
				var tr = $("<tr></tr>");
				var nametd = $("<td></td>");
				var pricetd = $("<td></td>");
				var numtd = $("<td><input type='button' value='-' onclick='numfn(-1)'><span>1</span><input type='button' value='+'onclick='numfn(1)'></td>");
				var moneytd = $("<td></td>");
				var deltd = $("<td><input type='button' value='删除'></td>");
				deltd.children().click(function(){
					tr.remove();//删除行
					//计算总价
					calfn();
				});
				//[0]取出的js对象.eq(0)取出的是jq对象
				var name= $(this).parent().siblings().eq(0).text();
				var price= $(this).parent().siblings().eq(1).text();
				//给td设置显示的文本
				nametd.text(name);
				pricetd.text(price);
				moneytd.text(price);
				//把td装进tr
				tr.append(nametd);
				tr.append(pricetd);
				tr.append(numtd);
				tr.append(moneytd);
				tr.append(deltd);
				//把tr添加到table里
				$("tr:last").before(tr);
				//计算总价
				calfn();
			});
			
			function numfn(x){
				//在非动态绑定的事件中获取事件源,事件源就是触发事件的标签
				//obj代表点击的减号按钮或加号按钮
				var obj=event.target||event.srcElement;
				//通过按钮 得到原来的数量
				var  oldNum= $(obj).siblings("span").text();
				//和传递进来的x运算
				var newNum=parseInt(oldNum)+x;
				//数值不能低于1
				if(newNum<1){
					newNum=1;
				}
				//把得到的新值赋值进去
				$(obj).siblings("span").text(newNum);
				//得到单价
				var price=$(obj).parent().prev().text();
				//计算出金额
				var money=price*newNum;
				//把金额显示到对应的td中
				$(obj).parent().next().text(money);
				//计算总价
				calfn();
			}
			//计算总价的方法
			function calfn(){
				var total=0;
				//得到第二个table里面的每一行并遍历
				$("table:last tr").each(function(){
					//得到当前遍历tr里面的第四个孩子
					var money=parseInt($(this).children().eq(3).text());
					//过滤掉不是数值的
					if(!isNaN(money)){
						total+=money;
					}
				});
				//显示到最后一个td里面
				$("td:last").text(total+"元");
			}
		</script>
</body>
</html>








